import React,{useRef,useState,useEffect,useCallback} from 'react'
import { Button, Table, Col, Row, Tag } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import rolesAction from '../../redux/action/rolesAction';
import type { ColumnsType } from 'antd/es/table';
import { FormOutlined, DeleteOutlined, SettingOutlined, CaretRightOutlined } from '@ant-design/icons';
import { removeTag,getRightsList} from '../../api/roles';
import updateRolesAction from '../../redux/action/updateRolesAction';
import SetRights from './components/set-rights';
export default function Roles() {
  let [rigthsTree,setRightsTree] = useState<RolesChildrenItem[]>([]);
  let SetRightRef = useRef<any>();
  // 获取redux状态中的rolesList 
  let rolseList = useSelector((state: StoreStateType) => {
    return state.rolesReducer.rolesList
  })
  useEffect(()=>{
    getRightsList("tree").then(res=>{
        if(res.data.meta.status===200){
          setRightsTree(res.data.data);
        }
    })
  },[])
  let dispatch = useDispatch<any>();
  // 判断redux中的rolesList是否为空
  if (rolseList.length === 0) {
    dispatch(rolesAction())
  }
  // 定义表格每一列
  let columns: ColumnsType<RolesItem> = [
    {
      dataIndex: "id",
      title: "角色id",
      width: 80
    },
    {
      dataIndex: "roleName",
      title: "角色名称",
    },
    {
      dataIndex: "roleDesc",
      title: "角色描述",
    },
    {
      dataIndex: "action",
      title: "操作",
      width: 600,
      render(text, record: RolesItem) {
        return (
          <>
            <Button type="primary" icon={<FormOutlined />} size='small'>
              编辑
            </Button> &nbsp; &nbsp;
            <Button type="primary" danger icon={<DeleteOutlined />} size='small'>
              删除
            </Button>&nbsp; &nbsp;
            <Button type="primary" icon={<SettingOutlined />} size='small' onClick={()=>{
              SetRightRef.current.init(rigthsTree,record.children,record.id);
            }}>
              分配权限
            </Button>
          </>
        )
      }
    }
  ]
  // 删除角色指定权限
  let removeRoles = async (e:any,roleId:number,rightId:number )=>{
    e.preventDefault();
    let res = await removeTag(roleId,rightId);
    console.log(res)
    dispatch(updateRolesAction(roleId,res.data.data))
  }
  let over = useCallback(()=>{
    dispatch(rolesAction())
  },[rolseList]);
  return (
    <div>
      <div>
        <Button type='primary'>添加角色</Button>
      </div>
      <div style={{ margin: '15px 0' }}>
        <Table dataSource={rolseList} columns={columns} bordered={true} rowKey='id' expandable={{
          childrenColumnName: 'list',
          expandedRowRender: (record: RolesItem) => {
            console.log(record)
            return (
              <div>
                {/* 渲染一级权限 */}
                {
                  record.children?.map((item: RolesChildrenItem, index: number) => {
                    return (
                      <Row key={index} style={{ padding: '15px 0',borderBottom:'1px solid #f1f1f1' }}>
                        <Col span={5}>
                          <Tag color="cyan" closable onClose={(e)=>removeRoles(e,record.id,item.id)}>{item.authName}</Tag><CaretRightOutlined />
                        </Col>
                        <Col span={19}>
                          {
                            // 渲染二级权限
                            item.children?.map((item2:RolesChildrenItem, index2:number) => {
                              return (
                                <Row key={index2}>
                                  <Col span={5}>
                                  <Tag color="green" closable  onClose={(e)=>removeRoles(e,record.id,item2.id)}>{item2.authName}</Tag><CaretRightOutlined />
                                  </Col >
                                  <Col span={19}>
                                    {
                                      // 渲染三级权限
                                      item2.children?.map((item3:RolesChildrenItem,index3)=>{
                                        return   <Tag color="orange" closable key={index3} style={{ marginBottom: '20px' }} onClose={(e)=>removeRoles(e,record.id,item3.id)}>{item3.authName}</Tag>
                                      })
                                    }
                                  </Col>
                                </Row>
                              )
                            })
                          }
                        </Col>
                      </Row>
                    )
                  })
                }
              </div>
            )
          },
          rowExpandable: (record: RolesItem) => true
        }}></Table>
      </div>
      <SetRights ref={SetRightRef} over={over}/>
    </div>
  )
}
